---
id: field
title: Field
description: Provides a flexible container for form inputs, labels, and helper text.
---

<ComponentPreview id="Field" />

## Examples

The `Field` component provides contexts such as `invalid`, `disabled`, `required`, and `readOnly` for form elements.
While most Ark UI components natively support these contexts, you can also use the `Field` component with standard HTML
form elements.

### Input

This example shows how to use the `Field` component with a standard input field.

<Example id="input" />

### Textarea

This example illustrates how to use the `Field` component with a textarea element.

<Example id="textarea" />

### Textarea Autoresize

Pass the `autoresize` prop to the `Textarea` component to enable automatic resizing as the user types.

<Example id="textarea-autoresize" />

### Select

This example demonstrates how to integrate the `Field` component with a select dropdown.

<Example id="select" />

### Checkbox

This example demonstrates how to integrate the `Field` and `Checkbox` components.

<Example component="checkbox" id="with-field" />

### Root Provider

Use the `useField` hook to create the field store and pass it to the `Field.RootProvider` component. This allows you to
have maximum control over the field programmatically.

<Example id="root-provider" />

> If you're using the `Field.RootProvider` component, you don't need to use the `Field.Root` component.

### Custom Control

Use the `Field.Context` or `useFieldContext` hook to access the internal state of the field.This can help you wire up
custom controls with the `Field` component.

<Example id="custom-control" />

## API Reference

<ComponentTypes id="field" />
